<template>
  <div class="">
    <div
      :class="`full-nav ${isSticky ? 'fixed top-0 left-0 right-0 z-50' : ''}`"
    >
      <div class="pt-3 wrapper">
        <div class="flex items-center ">
          <div class="grow">
            <a href="/home/"><img :src="getAssetsFile('logo.png').href" alt="logo" /></a>
          </div>
          <ul class="flex items-center text-xl text-white menu">
            <li :class="{ curr: curr === 'home' }">
              <a href="/home/">首页</a>
            </li>
            <li class="line"></li>
            <li
              class="relative hover:show-sub"
              :class="{ curr: curr === 'game' }"
            >
              <span class="cursor-pointer">游戏</span>
              <div class="absolute submenu">
                <div class="triangle-up"></div>
                <ul>
                  <li :class="{ curr: curr === 'qmxb' }">
                    <a href="/qmxb/">全民学霸</a>
                  </li>
                  <li :class="{ curr: curr === 'mrz' }">
                    <a href="/mrz/">美人传</a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="line"></li>
            <li
              class="relative hover:show-sub"
              :class="{ curr: curr === 'about' }"
            >
              <span class="cursor-pointer">企业文化</span>
              <div class="absolute submenu">
                <div class="triangle-up"></div>
                <ul>
                  <li><a href="/about/">关于我们</a></li>
                  <li><a href="/benefit/">公司福利</a></li>
                </ul>
              </div>
            </li>
            <li class="line"></li>
            <li :class="{ curr: curr === 'joinus' }">
              <a href="/joinus/">人才招聘</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, onMounted, onUnmounted, defineComponent } from 'vue'
import { getAssetsFile } from '@/utils/getAccessFile'
export default defineComponent({
  name: 'GlobalMenu2',
  inheritAttrs: false,
  props: {
    curr: { type: String, default: '' }
  },
  setup() {
    const isSticky = ref(false)
    const handleScroll = () => {
      isSticky.value = window.scrollY > 100
    }
    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })
    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll)
    })
    return {
      isSticky,
      getAssetsFile
    }
  }
})
</script>

<style lang="scss" scoped>
.full-nav {
  background-color: rgba(102, 145, 175, 0.9);
  color: #fff;
  height: 69px;
  z-index: 9;
  transition: all 0.6s ease-in;
  padding-top:10px;
  .menu {
    > li {
      padding: 6px 15px;
      cursor: pointer;
      &:hover {
        color: #8bd0ff;
        .submenu {
          display: block;
        }
      }
      &.curr {
        color: #8bd0ff;
      }
      &.line {
        padding: 0;
        width: 0px;
        height: 20px;
        border-right: 1px solid #76a6c7;
      }
      .submenu {
        display: none;
        top: 100%;
        left: 50%;
        margin-top: 0px;
        transform: translateX(-50%);
        ul {
          padding: 6px 10px;
          background-color: rgba(18, 41, 69, 0.9);
          white-space: nowrap;
          border-radius: 6px;
          font-size: 1rem;
          color: #fff;
          > li {
            border-bottom: 1px solid #1e466c;
            text-align: center;
            line-height: 2;
            &:hover {
              color: #8bd0ff;
            }
          }
        }
      }
    }
  }
}
.triangle-up {
  margin: 0 auto;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid rgba(18, 41, 69, 0.9);
}
</style>
